<template>
  <div class="application-form">
    <!-- 基本信息 -->
    <el-card class="box-cardv">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="领用单号" prop="orderNo">
              <el-input v-model="formData.orderNo" disabled placeholder="系统自动生成"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用主题" prop="subject">
              <el-input v-model="formData.subject" placeholder="请输入领用主题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="申请时间" prop="applyTime" style="width: 473px;">
              <el-date-picker v-model="formData.applyTime" type="date" placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="warehouse">
              <el-select v-model="formData.warehouse" placeholder="请选择" style="width: 473px;">
                <el-option label="仓库A" value="A"></el-option>
                <el-option label="仓库B" value="B"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="领用申请人">
              <el-input v-model="formData.applicant" disabled placeholder="admin"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在部门">
              <el-input v-model="formData.department" placeholder="维修部门"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="领用类型" prop="type">
              <el-select v-model="formData.type" placeholder="请选择" style="width: 473px;">
                <el-option label="类型1" value="1"></el-option>
                <el-option label="类型2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联工单">
              <el-input v-model="formData.relatedOrder" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="领用原因" prop="reason">
          <el-input type="textarea" v-model="formData.reason" placeholder="请输入领用原因" :rows="3">
          </el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="formData.remarks" placeholder="请输入备注" :rows="3">
          </el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 设备信息 -->
    <el-card class="box-card2v">
      <div slot="header" class="clearfix">
        <span>设备信息</span>
      </div>
      <el-form :model="deviceForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备名称">
              <el-input v-model="deviceForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编号">
              <el-input v-model="deviceForm.code" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="规格型号">
              <el-input v-model="deviceForm.model" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型">
              <el-input v-model="deviceForm.type" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="存放位置">
              <el-input v-model="deviceForm.location" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用部门">
              <el-input v-model="deviceForm.department" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 备件明细表格 -->
    <el-card class="box-card3v">
      <div slot="header" class="clearfix">
        <span>备件明细</span>
      </div>
      <el-button-group style="margin-bottom: 20px">
        <el-button type="primary" @click="addItem">添加</el-button>
        <el-button type="danger" @click="removeItems">移除</el-button>
      </el-button-group>
      <el-table :data="items" ref="registTable" style="width: 100%">
        <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
        <el-table-column type="index" label="序号" fixed />
        <el-table-column label="操作" fixed>
          <template v-slot="scope">
            <el-button type="text" @click="moveItem(scope.$index)">移除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="备件编码" width="150" align="center" />
        <el-table-column prop="name" label="备件名称" width="150" align="center" />
        <el-table-column prop="model" label="规格型号" width="150" align="center" />
        <el-table-column prop="type" label="备件类型" width="150" align="center" />
        <el-table-column prop="brand" label="品牌" width="150" align="center" />
        <el-table-column prop="unit" label="单位" width="150" align="center" />
        <el-table-column prop="quantity" label="当前库存" width="150" align="center" />
        <el-table-column prop="storage" label="存放位置" width="150" align="center" />
        <el-table-column label="领用数量" width="150" align="center">
          <template v-slot="scope">
            <el-input-number v-model="scope.row.usedQuantity" :min="0" :max="scope.row.quantity" style="width: 120px" />
          </template>
        </el-table-column>
        <el-table-column prop="note" label="备注" width="150" align="center" />
      </el-table>
      <div class="footer2">
        <span>领用总数量：{{ totalUsedQuantity }}</span>
      </div>
    </el-card>

    <!--附件上传-->
    <el-card class="box-card3vv">
      <div slot="header" class="clearfix">
        <span>附件上传</span>
      </div>
      <el-button-group style="margin-bottom: 20px">
        <el-upload ref="upload2" action="http://localhost:9289/maintenance/upload2" :on-success="handleUploadSuccess2"
          :file-list="fileList2" :auto-upload="true" :show-file-list="false" :before-upload="beforeUpload">
          <el-button type="primary">上传文档</el-button>
        </el-upload>
      </el-button-group>
      <el-button @click="removeSelectedRows3" style="position: relative; top: -8px; left: 10px">移除</el-button>
      <el-table :data="documents" style="width: 100%" border @selection-change="handleSelectionChange37">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="文件名"></el-table-column>
        <el-table-column prop="uploadDate" label="上传时间"></el-table-column>
        <el-table-column prop="uploader" label="上传者"></el-table-column>
        <el-table-column prop="size" label="文档大小"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="removeRow3(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-footer class="footer">
      <el-button @click="handleCancel" style="margin-top: 20px; margin-left: -140px">关闭</el-button>
      <el-button type="primary" @click="handleConfirm" style="margin-top: 20px; margin-left: 20px">确认</el-button>
    </el-footer>
    <div style="height: 140px"></div>
  </div>
</template>

<script>
export default {
  name: 'ApplicationForm',
  data() {
    return {
      formData: {
        applicationNo: '系统自动生成',
        subject: '',
        applyTime: '',
        department: '',
        reason: '',
        remark: ''
      },
      deviceForm: {
        name: ''
      },
      partsList: [],
      fileList: [],
      selectedParts: [],
      items: [
        { code: "222", name: '轴承', model: '6204ZZ', type: '机械备件', brand: 'SKF', unit: '个', quantity: 20, storage: '19-09', note: '', usedQuantity: 0 },
        { code: "222", name: '轴承', model: '6204ZZ', type: '机械备件', brand: 'SKF', unit: '个', quantity: 20, storage: '19-09', note: '', usedQuantity: 0 },
        { code: "222", name: '轴承', model: '6204ZZ', type: '机械备件', brand: 'SKF', unit: '个', quantity: 20, storage: '19-09', note: '', usedQuantity: 0 },
        { code: "222", name: '轴承', model: '6204ZZ', type: '机械备件', brand: 'SKF', unit: '个', quantity: 20, storage: '19-09', note: '', usedQuantity: 0 },
        { code: "222", name: '轴承', model: '6204ZZ', type: '机械备件', brand: 'SKF', unit: '个', quantity: 20, storage: '19-09', note: '', usedQuantity: 0 },
      ],
    }
  },
  computed: {
    totalUsedQuantity() {
      return this.items.reduce((total, item) => total + item.usedQuantity, 0);
    },
  },
  methods: {
    addItem() {
      this.items.push({ code: "222", name: '新备件', model: '', type: '机械备件', brand: '', unit: '个', quantity: 200, storage: '', note: '', usedQuantity: 0 });
    },
    removeItems() {
      const selected = this.$refs.registTable.selection;
      this.items = this.items.filter(item => !selected.includes(item));
    },
    moveItem(index) {
      this.items.splice(index, 1);
    },
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.footer2 {
  float: right;
  height: 50px;
  margin-top: 16px;
}

.fixed-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  text-align: center;
  background-color: #eeeded;
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
}

.application-form {
  padding: 20px;
}

.box-cardv {
  width: 1210px;
  /* height: 660px; */
  margin-left: 14px;
}

.box-card2v {
  width: 1210px;
  margin-left: 14px;
  margin-top: 20px;
}

.box-card3v {
  width: 1210px;
  margin-left: 14px;
  margin-top: 20px;
}

.box-card4v {
  width: 1210px;
  margin-left: 14px;
  margin-top: 20px;
}

.box-card3vv {
  width: 1210px;
  margin-left: 14px;
  margin-top: 20px;
}
</style>
